import '@/assets/style/home.scss'
import {Link,Outlet,useNavigate} from 'react-router-dom'
import {useState} from 'react'
export default ()=>{
    const nav=useNavigate()
    const [menus,setMenus]=useState([
        {
            path:'/',
            name:'系统主页'
        },
        {
            path:'/sys',
            name:'系统管理',
            children:[
                {
                    path:'/userList',
                    name:'用户管理',
                    meta:{
                        firstMenu:'系统管理',
                        secondMenu:'用户管理'
                    }
                },
                {
                   path:'/roleList',
                   name:'角色管理',
                   meta:{
                    firstMenu:'系统管理',
                    secondMenu:'角色管理'
                   } 
                },
                {
                    path:'/menuList',
                    name:'菜单管理',
                    meta:{
                        firstMenu:'系统管理',
                        secondMenu:'菜单管理'
                    }   
                },
                {
                    path:'/distList',
                    name:'字典管理',
                    meta:{
                        firstMenu:'系统管理',
                        secondMenu:'字典管理'
                    }
                }
            ]

        },
        {
            path:'/product',
            name:'商品管理',
            children:[
                {
                    path:'/productList',
                    name:'商品管理',
                    meta:{
                        firstMenu:'商品管理',
                        secondMenu:'商品管理'
                    }
                },
                {
                    path:'/productType',
                    name:'商品类型管理',
                    meta:{
                        firstMenu:'商品管理',
                        secondMenu:'商品类型管理'
                    }
                }
            ]
        }
    ])

    const go=(arg,e)=>{
        e.stopPropagation()
       if(!arg.children||arg.children.length==0){
        if(arg.meta){
            nav(arg.path,{
                state:arg.meta
            })
          
        }else{
            nav(arg.path)
        } 
       
       }
    }
    return(<div className="container">
       <div className="header">蜗牛养车后台管理系统</div>
       <div className="main">
            <div className="sider">
                {/* <ul style={{marginLeft:'10px'}}>
                    <li>
                        <div>
                            <Link to={"/"}>系统主页</Link>
                        </div>
                        <div>系统管理</div>
                        <ul style={{marginLeft:'20px'}}>
                            <li><Link to={"/userList"} state={{firstMenu:'系统管理',secondMenu:'用户管理'}}>用户管理</Link></li>
                            <li><Link to={"/roleList"} state={{firstMenu:'系统管理',secondMenu:'角色管理'}}>角色管理</Link></li>
                            <li><Link to={"/menuList"} state={{firstMenu:'系统管理',secondMenu:'菜单管理'}}>菜单管理</Link></li>
                            <li><Link to={"/distList"} state={{firstMenu:'系统管理',secondMenu:'字典管理'}}>字典管理</Link></li>
                        </ul>
                    </li>
                    <li>
                        <div>商品管理</div>
                        <ul style={{marginLeft:'20px'}}>
                            <li><Link to={"/productList"} state={{firstMenu:'商品管理',secondMenu:'商品管理'}}>商品管理</Link></li>
                            <li><Link to={"/productType"} state={{firstMenu:'系统管理',secondMenu:'商品类型管理'}}>商品类型管理</Link></li>
                        </ul>
                    </li>
                </ul> */}

                

                <ul>
                    {
                        menus.length>0&&menus.map((item,index)=><li key={index} onClick={(e)=>{go(item,e)}}>
                            <div>{item.name}</div>
                            {
                                item.children&&<ul style={{marginLeft:'20px'}}>
                                    {item.children.length>0&&item.children.map((sItem,sIndex)=><li key={sIndex} onClick={(e)=>{go(sItem,e)}}>{sItem.name}</li>)}
                                </ul>
                            }
                        </li>)
                    }
                </ul>






            </div>
            <div className="content">
                {/* 嵌套路由的出口 */}
                <Outlet></Outlet>
            </div>
       </div>
    </div>)
}